<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>相册列表</title>
    <!-- 公共 -->
    <script type="text/javascript" charset="utf-8" src="/common/js/framework.js"></script>
    <script type="text/javascript" charset="utf-8" src="/common/js/navbar.js"></script>
    <script type="text/javascript" charset="utf-8" src="/common/js/copyright.js"></script>

    <link href="css/showAlbum.css" rel="stylesheet" type="text/css">
    <link href="css/albumIndex.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" charset="utf-8" src="js/myAlbumIndex.js"></script>

    <link rel="stylesheet" href="/common/css/swiper.min.css">
    <script src="/common/js/swiper.min.js"></script>

    <style>
        .introTitle {
            color: white !important;
            height: 20px!important;
        }
        .xiangce{
            height: 30px;
            line-height: 30px;
            position: relative;
            top: 30px;
            left: 40px;
        }

        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div class="layui-container" style="position: relative;">
    <div class="functionWrapper">


        <div style="display: flex;align-items: center;">

            <span style="width: 50%">开始时间:</span><input  type="text" id="begin" class="layui-input">
            <span style="margin-left: 10px; width: 50%;">结束时间:</span><input  type="text" id="end" class="layui-input">
            <span style="margin-left: 10px; width: 50%;text-align: center;">地址:</span><input  type="text" id="address" class="layui-input">
            <a onclick="findAlbum()" style="padding: 10px 20px; margin:0 10px;border: none;background: yellowgreen;color: white;width: 50%;text-align: center;">查询</a>
            <a onclick="window.location.href = 'createAlbum.html'" style="padding: 10px 20px;border: none;background: dodgerblue;color: white;width: 50%;text-align: center;">创建相册</a>
<!--            <button id="createAlbum" href="createAlbum.html" class="btn btn-danger" style="">创建相册</button>-->
        </div>
        <!--        <div class="storeDisWrapper">已使用<span id="storageid"></span>M容量</div>-->
    </div>

    <div id="albumListId">
        <!-- 相册列表 -->
        <div class="photoListWrapper" >
            <div class="albumListNull" v-cloak v-if="albumList.length == 0">暂无相册</div>
            <ul class="photoList" v-if="albumList.length != 0">
                <li v-for="(album,index) in albumList"
                    class="list-item"
                    @mouseenter="photoListEnter(index)"
                    @mouseleave="photoListLeave(index)"
                    :key="index"
                >
                    <div class="list-item-wrapper">
                        <div style="height: 150px; position: relative;">
                            <a class="albumImageLink">
                                <img class="photoCover" :src="album.imageUrl" alt="photo4">
                                <span class="pic-num-wrap">
                                <span class="photoNumber">{{album.imageCount}}</span>
                            </span>
                            </a>
                        </div>
                    </div>
                    <div class="caption">
                        <a :href="album.showAlbumUrl" class="photoName" title="查看照片" role="link">{{album.albumName}}</a>
                        <div class="editWrapper">
                            <a title="编辑相册信息" @click="editAlbumClick(album,index)" data-method="editAlbum" data-type="auto"
                               class="editButton" :data-id="album.albumId" :data-index="index">
                                <img src="image/edit.png" alt="edit" style="width: 14px;height:16px;">
                            </a>
                            <a data-method="deleteAlbum" @click="deleteAlbumClick(album,index)" title="删除相册"
                               data-type="auto"

                               :data-id="album.albumId" :data-index="index">
                                <img src="image/delete.png" alt="delete">
                            </a>
                        </div>
                    </div>
                    <a class="photoListIntro" title="查看照片" v-show="album.isShow" :href="album.myShowAlbumUrl">
    <!--                    <h4 class="introTitle" style="margin-top: 10px;">相册介绍:</h4>-->
                        <p class="xiangce">相册介绍:{{album.albumintro}}</p>
                        <p class="xiangce">相册位置:{{album.address}}</p>
                    </a>
                    <div class="privateAlbum" v-if="album.albumpower == '0'">
                        <span class="privateAlbumText">私密</span>
                    </div>
                </li>
            </ul>
        </div>

        <!--相片列表-->
        <div class="photoShowGallery" style="width: 100%">
            <ul class="imgList" v-if="imgList.length != 0" style="display: flex;flex-wrap: wrap;">
                <li v-for="(item,index) of imgList"
                    class="list-item2"
                    :key="index"
                    @click="showPhotoDetail(index)">
                    <div class="list-item-wrapper">
                        <img class="photoItem" :src="item.fileurl.replace('.'+item.extendname,'_min.'+item.extendname)"
                             alt="照片展示">
                        <div class="maskImg" @click.stop="handleSelectIcon(index)"></div>
                        <div class="selectIcon" :id="item.fileid" @click.stop="handleSelectIcon(index)"></div>
                    </div>
                </li>
            </ul>
        </div>

        <div class="swiperWrapper" style="display: none;top: 0;">
            <!--退出按钮-->
            <button type="button" class="layui-btn layui-btn-sm exitButton">
                <i class="layui-icon layui-icon-close"></i>
            </button>
            <!--轮播图渲染区域-->
            <div class="imgListWrapper" style="width: 97%;"></div>
            <!--照片信息展示区域-->
            <div class="imgInfoWrapper" style="margin:20px 0;padding:20px 0;">
                <div class="titleWrapper">
                    <img class="userHeadImg" :src="activePhotoInfo.fileurl" alt=""/>
                    <div class="imgInfo">
                        <div class="imgInfoTop">
                            <div class="swipperPhotoName">{{activePhotoInfo.filename}}</div>
                        </div>
                        <div class="imgTime">{{activePhotoInfo.uploadtime}}</div>
                    </div>
                </div>
                <div class="imgOperation">
                    <span @click="updatePhotoCount(activePhotoInfo.fileid)" class="imgOperaIcon imgLike" title="点赞">
                        <i class="layui-icon layui-icon-praise"></i>
                        <label style="position: relative;bottom: 5px;">{{activePhotoInfo.primarirycount}}</label>
                    </span>
                    <span class="imgOperaIcon imgComments" title="评论">
                        <i class="layui-icon layui-icon-reply-fill"></i>

                        <label style="position: relative;bottom: 5px;">{{activePhotoInfo.comcount}}</label>
                    </span>
                </div>
                <div class="imgCommentsUserOpera">
                    <div class="layui-form-item layui-form-text">
                        <div class="remark-list">
                            <div class="remark-item" v-for="(remark,index) of remarkList"
                                 style="padding-bottom: 15px;margin-top: 15px;">
                                <a class="remark-item-left"
                                   style="display: inline-block;padding-right: 10px;margin-bottom: 25px;">
                                    <img class="img-xs" src="image/niming.jpg" style="    width: 40px;">
                                </a>
                                <div class="remark-text"
                                     style="width: 440px;display: inline-block;position: relative;top: 20px;">
                                    <div>
                                        <a style="color: #0645e8;">{{remark.userBean.username}}</a>
                                        <div>{{remark.remarkDate}}</div>
                                    </div>
                                    <div>{{remark.remarkContent}}</div>
                                    <a style="float: right;color: red;position: relative;bottom: 30px;"
                                       @click="clickReply(remark)">回复</a>
                                </div>
                                <div style="margin-left: 55px;background-color: #c4ffe6;">
                                    <div v-for="(reply,index) of remark.replyList">
                                        <div class="replay-text"
                                             style="overflow: hidden;width: auto;display: inline-block;">
                                            <p style="height: 25px;line-height: 25px;padding: 5px;">
                                                <a style="color: #0645e8;">{{reply.replyUserName}}</a>&nbsp;回复
                                                <a style="color: #0645e8;">{{reply.repliedUserName}}：</a>
                                                {{reply.replyContent}}
                                            </p>

                                        </div>
                                        <a style="float: right" @click="clickReply(reply)">回复</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-input-block">
                            <textarea placeholder="请输入内容" class="layui-textarea" id="remarkInputId"></textarea>
                        </div>
                        <label class="layui-form-label layui-btn layui-btn-normal" style="width: 200px"
                               onclick="remarkConfirm()">发表评论</label>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<div id="navbottomBarId"></div>
<!--模板引擎-->
<script type="text/html" id="swiperTemplate">
    <div class="swiper-container gallery-top">
        <div class="swiper-wrapper">
            {{each list v i}}
            <div class="swiper-slide">
                <img class="bigImg" src="{{v.fileurl}}" alt="大图查看"
                     data-name="{{v.filename}}" data-time="{{v.uploadtime}}"/>
            </div>
            {{/each}}
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
        <!-- 分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    <div class="swiper-container gallery-thumbs">
        <div class="swiper-wrapper">
            {{each list v i}}
            <div class="swiper-slide" style="text-align: center;">
                <img class="thumbsImg" src="{{v.fileurl.replace('.'+v.extendname,'_min.'+v.extendname)}}" alt="缩略图"/>
            </div>
            {{/each}}
        </div>
    </div>
</script>

<script>
    let indexContent, layedit
    layui.use(['table', 'upload', 'form', 'layedit', 'laydate'], function () {
        let $ = layui.$,
            form = layui.form,
            upload = layui.upload,
            laydate = layui.laydate;
        layedit = layui.layedit

        //执行一个laydate实例
        laydate.render({
            elem: '#begin', type: 'date' //指定元素
        });
        laydate.render({
            elem: '#end', type: 'date' //指定元素
        });
    });
</script>
</body>
</html>